<link type="text/css" rel="stylesheet" href="/js/jqueryui/development-bundle/themes/smoothness/ui.tabs.css" />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

        <style type="text/css" media="screen, projection">
            /* Not required for Tabs, just to make this demo look better... */
            body, h1, h2 {
                font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
            }
            h1 {
                margin: 1em 0 1.5em;
                font-size: 18px;
            }
            h2 {
                margin: 2em 0 1.5em;
                font-size: 16px;
            }
            p {
                margin: 0;
            }
            pre, pre+p, p+p {
                margin: 1em 0 0;
            }
            code {
                font-family: "Courier New", Courier, monospace;
            }
        </style>

        <script type="text/javascript">
            $(function() {
                $('#rotate_<?=$this->getLabel()?>MainDiv').tabs(<? if ($this->getToggle()):?>{ fx: { opacity: 'toggle' } }<?endif?>)<? if ($this->getToggle()):?>.tabs('rotate', 2000)<?endif;?>;
            });
        </script>

        <div id="rotate_<?=$this->GetLabel()?>MainDiv">
            <ul>
<? $count=0; foreach ($this->getSections() as $section): $count++;?>
                <li><a href="#fragment-<?=$this->getLabel()?>_<?=$count?>"><span><?=$section->title ?></span></a></li>
<?endforeach;?>
            </ul>

<? $count=0; foreach ($this->getSections() as $section): $count++;?>
            <div id="fragment-<?=$this->getLabel()?>_<?=$count?>">
                <?=$section->content ?>
            </div>
<?endforeach;?>
        </div>
